import 'package:flutter/material.dart';


class LayoutListVC extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    final titles = ["Wrap","Flow"];

    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("布局"),
      ),
      body: ListView.separated(
          itemBuilder: (context,i){
            return ListTile(
              onTap: () => _TouchCellForRow(context,i),
              title: Text(titles[i]),
            );
          },
          separatorBuilder: (context,i){
            return Divider();
          },
          itemCount: titles.length),
    );
  }

  void _TouchCellForRow(context,idx){
    switch (idx){
      case 0:{
        Navigator.pushNamed(context, "WrapLayoutVC");
        break;
      }
      case 1:{
        Navigator.pushNamed(context, "FlowLayoutVC");
        break;
      }
      default:
        break;
    }
  }

}

class FlowLayoutVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final cw = (MediaQuery.of(context).size.width - 43) / 3;
    return Scaffold(
      appBar: AppBar(title: Text("FlowLayout"),),
      body: Stack(
        children: [
          Container(
            color: Colors.greenAccent,
          ),
        Flow(
          delegate: FlowLyaoutDelegate(edgeInsets: EdgeInsets.all(10.0)),
          children: [
          Container(width: cw,height: cw,color: Colors.red,
            child: Align(
              alignment: FractionalOffset(0,1),
              child: Text("A",style: TextStyle(fontSize: 20,color: Colors.white),),
            ),
          ),
            Container(width: cw,height: cw,color: Colors.red,
              child: Align(
                alignment: Alignment(-1,1),
                child: Text("B",style: TextStyle(fontSize: 20,color: Colors.white),),
              ),
            ),
          Container(width: cw,height: cw,color: Colors.red,),
          Container(width: cw,height: cw,color: Colors.red,),
          Container(width: cw,height: cw,color: Colors.red,),
          Container(width: cw,height: cw,color: Colors.red,),
          Container(width: cw,height: cw,color: Colors.red,),
          Container(width: cw,height: cw,color: Colors.red,),
          ],
        )
      ]
    )
    );
  }
}

class FlowLyaoutDelegate extends FlowDelegate{

  FlowLyaoutDelegate({@required this.edgeInsets}):super();
  
  final EdgeInsets edgeInsets;
  @override
  void paintChildren(FlowPaintingContext context) {
    // TODO: implement paintChildren
    var x = this.edgeInsets.left;
    var y = this.edgeInsets.top;
    for (var i = 0; i < context.childCount; i++){
      final size = context.getChildSize(i);
      final w = size.width + this.edgeInsets.right;
      if ((x + w) < context.size.width){
        context.paintChild(i,transform: Matrix4.translationValues(x, y, 0));
        x = x + w;
      }else{
        x = this.edgeInsets.left;
        y = size.height + this.edgeInsets.top + this.edgeInsets.bottom;
        context.paintChild(i,transform: Matrix4.translationValues(x, y, 0));
        x = x + w;
      }
    }
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    // TODO: implement shouldRepaint
    return oldDelegate != this;
  }
}

class WrapLayoutVC extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("WrapLayout"),
      ),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Wrap(
          spacing: 5,
          runSpacing: 0,
          alignment: WrapAlignment.start,
          children: [
            Chip(
              avatar: CircleAvatar(
                child: Text("A"),
              ),
              label: Text("A Text"),
            ),
            Chip(
              avatar: Icon(Icons.ac_unit),
              label: Text("B Text"),
            ),
            Chip(
              avatar: Icon(Icons.ac_unit),
              label: Container(child: Text("C Text福建阿里斯顿快解",maxLines: 10,textWidthBasis: TextWidthBasis.longestLine,),),
            ),
            Chip(
              avatar: Icon(Icons.ac_unit),
              label: Text("D Text"),
            ),
            Chip(
              avatar: Icon(Icons.ac_unit),
              label: Text("D Text"),
            ),
          ],
        ),
      )
    );
  }
}